<template>
  <div class="search">
    <input
      type="search"
      :placeholder="placeholder"
      @focus="handleFocus"
      @blur="handleBlur"
    />
    <van-icon name="search" />
  </div>
</template>

<script>
import { Icon } from "vant";
export default {
  data() {
    return {
      placeholder: "热搜产品: Mistine",
    };
  },
  components: {
    VanIcon: Icon,
  },
  methods: {
    // 获取焦点时触发
    handleFocus() {
      this.placeholder = "";
    },

    // 失去焦点后触发
    handleBlur() {
      this.placeholder = "热搜产品: Mistine";
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  position: relative;
  margin-bottom: 30px;

  input {
    display: block;
    width: 686px;
    height: 60px;
    margin-left: 32px;
    background: #f5f5f5;
    border: none;
    border-radius: 30px;
    text-align: center;
    font-size: 26px;
    font-family: PingFang;
  }

  input::placeholder {
    color: #ababab;
  }

  .van-icon-search {
    position: absolute;
    left: 70px;
    top: 15px;
    font-size: 35px;
    color: #ababab;
  }
}
</style>
